<template>
  <div class="goods_items">
    <!-- 456 -->
    <img
      src="@/assets/img/f1.png"
      v-if="this.goodsList.length == 0"
      width="100%"
    />
    <div
      class="goods_item"
      v-else
      v-for="(item, index) in goodsList"
      :key="index"
      @click="gocar(item)"
    >
      <div class="goods_item_img">
        <img :src="item.pic" width="100%" />
      </div>
      <div class="goods_item_text">{{ item.name }}</div>
      <div class="goods_item_price">￥{{ item.originalPrice + ".00" }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [],
    };
  },
  mounted() {
    var name = this.$route.query.item.name;
    this.$API.getStoreList().then((res) => {
      console.log(res);
      var allGoods = res.data.data;
      allGoods.forEach((item) => {
        if (item.name.includes(name)) {
          this.goodsList.push(item);
        }
      });
    });
  },
  methods: {
    gocar(item) {
      this.$router.push({ path: "/shopcar", query: { id: item.id } });
    },
  },
};
</script>

<style>
.goods_items {
  margin-top: 1.1rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.goods_item {
  width: 47%;
  height: 4.8rem;
  /* margin: 0.1rem; */
  margin: 5rem 0;
}
.goods_item_img {
  width: 100%;
  height: 3.5rem;
}
.goods_item_text {
  background-color: #f0edd4;
  color: #b69b72;
  font-size: 0.25rem;
  padding: 0.1rem 0;
}
.goods_item_price {
  color: orange;
}
</style>